<template>
      <div class="layout">
     <!-- <h2>根组件</h2> -->
     <!-- 路由出口 -->
     <router-view></router-view>
     <top-view></top-view>
     <footer>
       <div>
         <router-link active-class="active" to="/home/recommand">
           <i class="icon1"></i>
           <p>主页</p>
         </router-link>
         <router-link exact-active-class="active" to="/task">
           <i class="icon2"></i>
           <p>分类</p>
         </router-link>
         <router-link exact-active-class="active" to="/money">
           <i class="icon3"></i>
           <p>签到</p>
         </router-link>
         <router-link exact-active-class="active" to="/my">
           <i class="icon4"></i>
           <p>我的</p>
         </router-link>
       </div>
     </footer>
   </div>
 </template>
 <style lang="less" scoped>
 @import './common/less/varible.less';
 
 #app {
   font-family: @fontfamily;
 }
 
 .wrapper {
   font-family: @fontfamily;
   // background-color: rgba(248, 219, 222, .4);
   display: none;
 
 }
 
 footer {
   font-family: @fontfamily;
   font-size: 22px;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 1000;
   width: 100%;
   padding-top: 10px;
   height: 80px;
   background: rgba(248, 219, 222, .6);
 
   >div {
     width: 100%;
     height: 60px;
     align-items: center;
     display: flex;
 
     a {
       flex-basis: 33.33333%;
       flex-grow: 1;
       text-align: center;
       // 移除a标签在移动端的轻触高亮效果
       -webkit-tap-highlight-color: transparent;
       color: #333;
 
       .icon1 {
         background-image: url(./views/pages/img/home.png);
       }
 
       .icon2 {
         background-image: url(./views/pages/img/search.png);
       }
 
       .icon3 {
         background-image: url(./views/pages/img/financing.png);
       }
 
       .icon4 {
         background-image: url(./views/pages/img/people.png);
       }
     }
 
     a.active {
       .icon1 {
         background-image: url(./views/pages/img/home_write.png);
       }
 
       .icon2 {
         background-image: url(./views/pages/img/search_write.png);
       }
 
       .icon3 {
         background-image: url(./views/pages/img/financing_write.png);
       }
 
       .icon4 {
         background-image: url(./views/pages/img/people_write.png);
       }
     }
   }
 }
 
 // 利用i标签做图标
 [class^="icon"] {
   display: inline-block;
   width: 20px;
   height: 20px;
   background-size: cover;
 }
 </style>
 <script>
 
 import TopView from './views/TopView.vue';
 
 export default {
   components: {
     TopView,
   },
 }
 </script>